<template>
  <div class="card-list" ref="cardListRef">
    <template v-for="(item, index) in data" :key="index">
      <div class="card-item">
        <div class="header" ref="headerRef">
          <div class="time">
            <span>{{ item.start_time }}</span>
            <span style="margin: 0 2px" v-if="lang == 'cn'">至</span>
            <span style="margin: 0 2px" v-if="lang == 'en'">to</span>
            <span>{{ item.end_time }}</span>
          </div>
          <div class="titles">
            <template
              v-for="(title, titleIndex) in item.titles"
              :key="titleIndex"
            >
              <span v-if="title">{{ title }}</span>
              <span class="split" v-if="titleIndex != item.titles.length - 1"
                >|</span
              >
            </template>
          </div>
          <div class="btns">
            <span @click="clickButton('update', index)">
              <template v-if="lang == 'cn'">修改</template>
              <template v-if="lang == 'en'">edit</template>
            </span>
            <span @click="clickButton('delete', index)">
              <template v-if="lang == 'cn'">删除</template>
              <template v-if="lang == 'en'">delete</template>
            </span>
          </div>
        </div>
        <div class="tags">
          <template v-for="(tag, tagIndex) in item.tags" :key="tagIndex">
            <span v-if="tag">{{ tag }}</span>
            <span class="split" v-if="tagIndex != item.tags.length - 1">|</span>
          </template>
        </div>
        <div class="descri" v-if="item.descri">
          <div class="label" v-if="workDescri">
            {{ $t("content.profile.job.job_desc") }}:
            <template v-if="lang == 'cn'">自我评价：</template>
            <template v-if="lang == 'en'">Self-assessment：</template>
          </div>
          <div class="label" v-else>
            <template v-if="lang == 'cn'">描述：</template>
            <template v-if="lang == 'en'">Description：</template>
          </div>
          <div class="value raw-html">
            <div class="ql-editor" v-html="item.descri"></div>
          </div>
        </div>
      </div>
      <div class="mobile-btns">
        <span @click="clickButton('update', index)">
          <template v-if="lang == 'cn'">修改</template>
          <template v-if="lang == 'en'">edit</template>
        </span>
        <span @click="clickButton('delete', index)">
          <template v-if="lang == 'cn'">删除</template>
          <template v-if="lang == 'en'">delete</template>
        </span>
      </div>
      <div class="divider-line" v-if="index != data.length - 1"></div>
    </template>
    <NoData v-if="data && data.length == 0" size="mini" />
  </div>
</template>

<script setup lang="ts">
import { message, Modal } from "ant-design-vue";
import {
  onMounted,
  ref,
  watch,
  nextTick,
  getCurrentInstance,
  inject,
  onBeforeUnmount,
} from "vue";

let lang = inject("lang");

const $t = getCurrentInstance()?.appContext.config.globalProperties.$t;

type ListItem = {
  start_time: string;
  end_time: string;
  titles: string[];
  tags: string[];
  descri: string;
  workDescri?: boolean;
};
type Props = {
  data: ListItem[];
  delLoading: boolean;
};
const props = defineProps<Props>();

const cardListRef = ref<HTMLElement | undefined>();

// 点击按钮事件，通过emits向父组件传递事件
let modal: any;
const emits = defineEmits(["clickButton", "update:delLoading"]);
const clickButton = (type: string, index: number) => {
  if (type == "delete") {
    // 弹窗提示
    modal = Modal.confirm({
      title: $t("dialog.delete_data.title"),
      content: $t("dialog.delete_data.desc"),
      okText: $t("btnText.ensure"),
      cancelText: $t("btnText.cancel1"),
      maskClosable: !props.delLoading,
      onOk(done) {
        emits("clickButton", { type, index });
      },
      onCancel() {
        emits("update:delLoading", false);
      },
    });
  } else {
    emits("clickButton", { type, index });
  }
};
watch(
  () => props.delLoading,
  (flag) => {
    if (!flag) {
      modal.destroy();
    }
    modal.update({
      okButtonProps: {
        loading: props.delLoading,
      },
      maskClosable: !props.delLoading,
    });
  }
);
// 初始时，对header的位置进行判断，若header的btns的高度大于header的高度，则将btns和title的位置进行交换
const initHeaderOrder = () => {
  if(!cardListRef.value) return
  nextTick(() => {
    let headerList = cardListRef.value?.querySelectorAll(".header");
    headerList?.forEach((header) => {
      let btnHeight = (header?.querySelector(".btns") as HTMLElement)
        .offsetHeight;
      let headerHeight = (header as HTMLElement)?.offsetHeight;
      if (headerHeight > btnHeight) {
        header.classList.add("order-title");
      }
    });
  });
};
watch(
  () => props.data,
  () => {
    initHeaderOrder();
  }
);

onMounted(() => {
  window.addEventListener('resize',initHeaderOrder)
});
onBeforeUnmount(() => {
  window.removeEventListener('resize',initHeaderOrder)
})
</script>
<style scoped lang="less">
.card-list {
  font-size: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  .divider-line {
    margin: 0;
  }
  .split {
    margin: 0 5px;
  }
  .card-item {
    padding: 24px 48px;
    .header {
      display: flex;
      align-items: center;
      color: #36434d;
      gap: 16px;
      margin-bottom: 0;
      flex-wrap: wrap;
      & > div {
        order: 1;
      }
      .time {
        white-space: nowrap;
      }
      .btns {
        display: flex;
        gap: 8px;
        white-space: nowrap;
        span {
          padding: 4px 16px;
          cursor: pointer;
          border-radius: 6px 6px 6px 6px;
          border: 1px solid #ccd6de;
          color: #36434d;
          &:nth-child(2) {
            color: #ff4060;
          }
        }
      }

      &.order-title {
        .titles {
          order: 3;
        }
        .btns {
          order: 2;
        }
      }
    }
    .tags,
    .descri .value {
      color: #70818c;
    }
    .tags {
      margin-top: 8px;
    }
    .descri {
      margin-top: 24px;
      .value {
        min-width: 1px;
        margin-top: 8px;
      }
    }
  }
}

.mobile-btns {
  display: none;
  margin-top: 82px;
  gap: 40px;
  text-align: center;
  span {
    flex: 1;
    padding: 40px 0;
    font-size: 61px;
    border-radius: 31px 31px 31px 31px;
    border: 3px solid #ccd6de;
    &:last-child {
      color: #ff4060;
    }
  }
}

@media screen and (max-width: 768px) {
  .mobile-btns {
    display: flex;
  }
  .card-list {
    padding: 82px;
    padding-top: 0;
    font-size: 72px;
    .divider-line {
      margin: 123px 0;
    }
    .split {
      margin: 0 25px;
    }
    .card-item {
      padding: 0;
      .header {
        gap: 0;
        .btns {
          display: none;
        }
      }
      .titles {
        margin-top: 20px;
      }
      .tags {
        margin-top: 30px;
      }
      .descri {
        margin-top: 123px;
        .value {
          margin-top: 41px;
        }
      }
    }
  }
}
</style>
